<script setup>
import TagPanel from './components/tag-panel/index.vue'
import TablePanel from './components/table-panel/index.vue'
import ConfigPanel from './components/config-panel/index.vue'
import { provideDragKey, provideTableKey } from './hooks/use-provide-key'
import { vClickOutside } from '@/directives'

const group = readonly({
  name: 'tableContainer',
  pull: 'clone',
  put: false,
})

const schema = ref({
  id: '',
  name: '',
  formProps: {
    size: 'small',
    inline: false,
    labelPosition: 'right',
    labelWidth: 0,
    labelSuffix: '',
    disabled: false,
    hideRequiredAsterisk: false,
    requireAsteriskPosition: 'left',
    scrollToError: true,
  },
  data: {},
  fieldList: [],
})
// const updateSchema = data => {
//   schema.value.formProps = data?.formProps ?? {}
//   schema.value.data = data?.data ?? {}
//   const len = schema.value?.fieldList?.length ?? 0
//   schema.value.fieldList?.splice(0, len)
//   schema.value.fieldList?.push(...(data?.fieldList ?? []))
// }

const currentItem = ref({})
const currentRow = ref({})

const handleOutside = () => {
  currentItem.value = {}
  currentRow.value = {}
}

const tablePanelRef = useTemplateRef('tablePanelRef')
const getHtml = async () => {
  await nextTick()
  return tablePanelRef.value?.$el?.innerHTML
}

provide(provideDragKey, { group })
provide(provideTableKey, { schema })

defineExpose({ schema, getHtml })
</script>

<template>
  <el-container
    v-click-outside="handleOutside"
    class="h-full gap-2"
  >
    <el-aside width="250px">
      <TagPanel />
    </el-aside>
    <el-main class="p-0!">
      <TablePanel
        ref="tablePanelRef"
        v-model:schema="schema"
        v-model:currentItem="currentItem"
        v-model:currentRow="currentRow"
      />
    </el-main>
    <el-aside width="30%">
      <ConfigPanel
        v-model:schema="schema"
        v-model:currentItem="currentItem"
        v-model:currentRow="currentRow"
      />
    </el-aside>
  </el-container>
</template>
